<template>
  <div id="cylinder-container">
    <div id="cylinder-param">
      <el-form ref="form" :model="form" :inline="true">
        <el-form-item label="SIZE">
          <el-input v-model="form.size.x" @click.native.stop></el-input>
          <el-input v-model="form.size.y" @click.native.stop></el-input>
          <el-input v-model="form.size.z" @click.native.stop></el-input>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="form.borderChecked" border @change="doChange" @click.native.stop>边框</el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="form.busChecked" border @change="doBusChange" @click.native.stop>母线</el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" @click.native.stop>生效</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div id="cylinder-canvas"></div>
  </div>
</template>

<script>
  import * as THREE from 'three'
  import OrbitControls from 'threejs-orbit-controls'

  export default {
    name: "Cylinder3D",
    data() {
      return {
        form: {
          size: {
            x: 1,
            y: 1,
            z: 0.5
          },
          busChecked: false,
          borderChecked:false
        },
        cylinder3D: null,
        lineSegments: null,
        bus:null

      }
    },
    methods: {
      onSubmit() {
        this.cylinder3D.scale.x = this.form.size.x
        this.cylinder3D.scale.y = this.form.size.y
        this.cylinder3D.scale.z = this.form.size.z
      },
      doBusChange(){
        if(this.form.busChecked){
          this.cylinder3D.add(this.bus)
        }else{
          this.cylinder3D.remove(this.bus)
        }
      },
      doChange(val) {
        //  this.form.borderChecked = !this.form.borderChecked
        if (this.form.borderChecked) {
          this.addBorderLine()
        } else {
          this.cylinder3D.remove(this.lineSegments)
          this.lineSegments = null
        }
      },
      addBorderLine() {
        let cubeEdges = new THREE.EdgesGeometry(this.cylinder3D.geometry, 50);
        let edgesMtl = new THREE.LineBasicMaterial({color: 0xff0000});
        edgesMtl.depthTest = false
        this.lineSegments = new THREE.LineSegments(cubeEdges, edgesMtl);
        this.cylinder3D.add(this.lineSegments)

      }
    },
    mounted() {
      let scene = new THREE.Scene();
      scene.background = new THREE.Color(0xf0f0f0)
      var axes = new THREE.AxesHelper(100)
      scene.add(axes)
      var camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 10000);
      var controls = new OrbitControls(camera,document.getElementById('cylinder-canvas'));
      var raycaster = new THREE.Raycaster();
      var mouse = new THREE.Vector2();

      var renderer = new THREE.WebGLRenderer();


      renderer.setSize(4 * window.innerWidth / 5, window.innerHeight);
      document.getElementById('cylinder-canvas').appendChild(renderer.domElement)


      var cgeometry = new THREE.CylinderGeometry(10, 10, 30, 32);
      var cmaterial = new THREE.MeshNormalMaterial({

          vertexColors: THREE.VertexColors,
        flatShading: true,
        transparent: true,
        opacity: 0.5
      });


      this.cylinder3D = new THREE.Mesh(cgeometry, cmaterial);
      //this.cylinder3D.rotateX(3*Math.PI/4)


      var shape = new THREE.Shape();

      shape.moveTo(0, -15);
      shape.lineTo(10, -15)
      shape.lineTo(10, 15)
      shape.lineTo(0, 15)
      shape.lineTo(0, -15)

      var geometry = new THREE.ShapeGeometry(shape);
      var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
      this.bus = new THREE.Mesh(geometry, material);


      scene.add(this.cylinder3D)

      camera.position.set(20, 10, 150);
      controls.update();

      var animate = function () {
        requestAnimationFrame(animate);
        controls.update();
        renderer.render(scene, camera);
      };

      function onMouseMove(event) {
        event.preventDefault();
        mouse.x = ((event.clientX - renderer.domElement.getBoundingClientRect().left) / renderer.domElement.offsetWidth) * 2 - 1;
        mouse.y = -((event.clientY - renderer.domElement.getBoundingClientRect().top) / renderer.domElement.offsetHeight) * 2 + 1;

        raycaster.setFromCamera(mouse, camera);

        // 计算物体和射线的焦点
        let intersects = raycaster.intersectObjects(scene.children);
        for (var i = 0; i < intersects.length; i++) {
          intersects[i].object.material.color.set(0x6699ff);
        }
      }

  //    window.addEventListener('click', onMouseMove, false);
      requestAnimationFrame(animate)
    }
  }
</script>

<style scoped>

</style>
